<template>
	<view class="">
		<zx-head Title="测评结果" :isShowR="false"></zx-head>
		<view class="con">
			<view class="box1 _df _ac _jb mb60">
				<view class="text">
					<view class="title">
						AI抑郁症检测
					</view>
					<view class="info">
						医生：{{data.doctorIdDict.name}} | {{data.updateTime}}
					</view>
				</view>
				<navigator class="btn" url="/pages/comA/zhixin/view">
					实验数据详情
				</navigator>

			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon2.png" mode=""></image>
					诊断结果
				</view>
				<view class="list">
					<view class="item _df _ac">
						<view class="num-box">
							<view class="num2">
								{{data.diagnoseResultTag}}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{data.diagnoseDepressionProbability * 100}}%
							</view>
						</view>
						<view class="info">
							抑郁概率
						</view>
					</view>

				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon3.png" mode=""></image>
					情绪占比
				</view>
				<view class="chart" style="margin-top: -50rpx;padding-bottom: 50rpx;box-sizing: border-box;">
					<l-echart ref="chartRef2"></l-echart>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon7.png" mode=""></image>
					情绪波动
				</view>
				<view class="chart-box">
					<view ref="chart" id="chart" class="chart">
						<l-echart ref="chartRef"></l-echart>
					</view>
				</view>
			</view>
			<view class="box2" v-for="dom in data.diagnoseSuggest">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon3.png" mode=""></image>
					{{dom.text}}
				</view>
				<view class="info2" v-for="dom1 in dom.children">
					{{dom1.text}}
					<view class="info2" v-for="dom2 in dom1.children">
						{{dom2.text}}
					</view>
				</view>
			</view>
			<view class="_df _jb _ac btnBox">
				<view class="btn1 _df _ac _jc">
					分享结果
				</view>
				<view class="btn2">
					重新测试
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from "moment";

	export default {
		data() {
			return {
				myChart: null,
				chartInstance: null,
				option: {},
				option2: {},
				pageList: [],
				totalPage: 1,
				token: "",
				data: {
					doctorIdDict: {},
					diagnoseSuggest: [{}]
				}

			}
		},

		created() {


		},
		mounted() {

		},
		onReady() {
			this.initChart();
			
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.initChart2();
			// })
			this.getZXToken()

		},
		onShow() {

		},

		methods: {
			toView() {
				uni.navigateTo({
					url: '/pages/comA/details?title=了解情绪值' + '&type=2'
				})
			},
			getPageList() {
				let thisData = this;
				let data = {
					"url": "/admin/app/participantExperimentRecord/view?id=1838110418178936832",
					"data": thisData.page
				}
				uni.$_post({
					url: "getRequestResult",
					that: thisData,
					params: data,
					success(res) {
						if (res.data.success) {
							thisData.data = res.data.data;
							thisData.data.diagnoseSuggest = JSON.parse(res.data.data.diagnoseSuggest);
			
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon: 'error'
						});
					},
				});
			},
			getZXToken() {
				let thisData = this;
				uni.$_get({
					url: "getZXToken",
					that: thisData,
					success(res) {

						if (res.code == 0) {
							thisData.token = res.data;
							thisData.getPageList()
						} else {
							uni.showToast({
								title: "知心获取token异常！",
								duration: 1500,
								icon: 'error'
							});
						}
					}
				});
			},
			init() {
				// chart 图表实例不能存在data里
				this.$refs.chartRef.init(this.$echarts, chart => {
					chart.setOption(this.option);
				});
				this.$refs.chartRef2.init(this.$echarts, chart => {
					chart.setOption(this.option2);
				});

			},
			timeBack(e) {
				console.log(e, 666)
			},
			initChart() {

				let data = [
					['2024-08-12 01:00', 22],
					['2024-08-12 03:00', 33],
					['2024-08-12 05:00', 44],
					['2024-08-12 07:00', 55],
					['2024-08-12 12:00', 100],
					['2024-08-12 15:00', 78],
					['2024-08-12 20:00', "56"],
					// ['2024-08-12 15:00', "121"],
					// ['2024-08-12 19:00', "125"],
					// ['2024-08-12 16:00', "15"],
					// ['2024-08-12 23:00', "19"],

				]
				let xData = [
					'2024-08-12 01:00',
					'2024-08-12 02:00',
					'2024-08-12 03:00',
					'2024-08-12 04:00',
					'2024-08-12 05:00',
					'2024-08-12 06:00',
					'2024-08-12 07:00',
					'2024-08-12 08:00',
					'2024-08-12 09:00',
					'2024-08-12 10:00',
					'2024-08-12 11:00',
					'2024-08-12 12:00',
					'2024-08-12 13:00',
					'2024-08-12 14:00',
					'2024-08-12 15:00',
					'2024-08-12 16:00',
					'2024-08-12 17:00',
					'2024-08-12 18:00',
					'2024-08-12 19:00',
					'2024-08-12 20:00',
					'2024-08-12 21:00',
					'2024-08-12 22:00',
					'2024-08-12 23:00',
					'2024-08-12 24:00',
				]
				let yData = [22, 55, 33, 44, 88, 99, 18]
				this.option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					color: ['#8385ff'],
					grid: {
						left: '5%',
						right: '2%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisPointer: {
							type: 'shadow' // 阴影指示器
						},
						splitLine: {
							show: false //隐藏x轴那条线
						},
						// splitNumber:5,
						axisTick: {
							show: false //隐藏x轴的刻度
						},
						axisLine: {
							show: false
						},
						data: xData,
						axisLabel: {
							showMaxLabel: true,
							interval: 'auto',
							boundaryGap: false,
							textStyle: {
								color: "#999",
								fontSize: '12',
								lineHeight: 36,
							},
							formatter: function(value, index) {
								// 如果时间是 23:59:59 , 格式化为 24:00
								if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'))
									.getTime()) {
									return moment(value).format("24:00");
								} else {
									// 其他的时间返回格式化 00:00
									return moment(value).format("HH:mm");
								}
							}
						},

					},
					yAxis: [{
						type: 'value',
						position: 'right',
						axisLabel: {
							boundaryGap: false,
							textStyle: {
								color: "#999",
								fontSize: '10',
							}
						}
					}],

					series: [{
						name: '情绪波动',
						type: 'line',
						stack: 'Total',
						smooth: true,
						areaStyle: {
							opacity: 0.8,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 1,
									color: '#fff',
									opacity: 0.5,
								},
								{
									offset: 0,
									color: '#8489fe',
								}
							])
						},
						emphasis: {
							focus: 'series'
						},
						data: yData,

					}]
				}
				//情绪分布
				this.option2 = {
					tooltip: {
						trigger: 'item',
						valueFormatter: function(value) {
							return value + ' %'
						}
					},
					legend: {
						show: true,
						top: 'auto',
						bottom: 0,
						data: ['高兴', '伤心', '生气', '抑郁', '激动', '大哭']
					},
					color: ['#dbefcb', '#ffc7c5', '#d0efe8', '#d0d1f2', '#ffddca', '#feecc2'],
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						bottom: 20,
						data: [{
								value: 40,
								name: '高兴'
							},
							{
								value: 20,
								name: '伤心'
							},
							{
								value: 10,
								name: '生气'
							},
							{
								value: 20,
								name: '抑郁'
							},
							{
								value: 10,
								name: '激动'
							},
							{
								value: 10,
								name: '大哭'
							}
						]
					}]
				}
				this.init()
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.con {
		padding: 50rpx 30rpx;

		.box1 {
			.title {
				font-size: 32rpx;
				font-family: $uni-font-family-Bold;
				color: #222;
				margin-bottom: 8rpx;
			}

			.info {
				font-size: 22rpx;
				color: #aaa;
			}

			.btn {
				width: 214rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #6387ff;
				border-radius: 35rpx;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
			}
		}

		.chart-box {

			// padding: 0 30rpx;
			.title {
				// margin-bottom: 10rpx;
				line-height: 70rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					margin: 10rpx 27rpx 0 0;
				}
			}

			.num {
				font-size: 68rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}

			.dw {
				font-size: 24rpx;
				font-family: $uni-font-family-Medium;
				color: #000;
				line-height: 90rpx;
				margin-right: 8rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: $uni-font-family-Medium;
				color: #8F8F8F;
				margin-bottom: 10rpx;
			}

			.chart {
				width: 100%;
				height: 650rpx;
				margin-top: -80rpx;
			}
		}

		.box2 {
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.10);
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;

			.title {
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}

			.list {
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;

					&::before {
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -35rpx;
					}

					.num-box {
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						margin-right: 4rpx;

						.num2 {
							font-size: 50rpx;
						}

						.dw {
							font-size: 24rpx;
							line-height: 70rpx;
						}
					}

					.info {
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
					}

				}

				.item:nth-child(2),
				.item:nth-child(4) {
					&::before {
						display: none;
					}
				}
			}

			.info2 {
				font-size: 26rpx;
				font-family: $uni-font-family-Medium;
				color: #171717;
				line-height: 46rpx;
				padding: 30rpx 0;
			}
		}

		.box3 {
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.10);
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
		}

		.btnBox {
			.btn1 {
				width: 210rpx;
				height: 100rpx;
				background: #eff3ff;
				border: 1rpx solid #6387ff;
				border-radius: 50rpx;
				color: #6387FF;
				font-size: 32rpx;
				flex: 1;
				margin-right: 30rpx;
			}

			.btn2 {
				height: 100rpx;
				background: #6387FF;
				border-radius: 50rpx;
				color: #fff;
				font-size: 32rpx;
				flex: 2;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>